<template>
  <div id="my_headline">
    <div class="left_box">
      <div class="left_link" v-if="islink == false"></div>
      <div class="left_title" v-if="title != ''">{{ title }}</div>
      <div class="left_slot">
        <slot name="left"></slot>
      </div>
    </div>
    <div class="rigth_slot">
      <slot name="rigth"></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  islink: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="less" scoped>
#my_headline {
  .width_height(100%,@height_50);
  .D_J_A(space-between,center);
  box-sizing: border-box;
  padding: 0 @space_20;
  user-select: none;
  .left_box {
    .D_A(center);
    .left_link {
      .width_height(2px,16px);
      margin-right: 10px;
      background: @themeColor;
    }
    .left_title {
      .font-S-W-C(14px,700,#fff);
      margin-right: 10px;
    }
  }
  .left_slot {
    .D_A(center);
  }
  .rigth_slot {
    .D_J_A(flex-end,center);
  }
}
</style>
